<template>
  <div>
    <div class="capture">
      <video id="video" controls="controls">
        <source src="../assets/movie.ogg" type="video/ogg" />
      </video>
      <button id="capture-btn" @click="onCapture">Capture</button>
    </div>
    <div>
      <div id="wangEditor"></div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import WangEditor from 'wangeditor'
import 'wangeditor/release/wangEditor.min.css'

export default {
  name: 'Editor',
  data() {
    return {
      content: '',
      baseUrl: 'http://181.181.0.140:8888/api/v1',
      editor: null,
      initContent: '<p>富文本抓拍视频，例如</p><p><img src="http://181.181.0.140:8888/api/v1/static-resource/images/2019/04/12/46a7834a-ee1a-4df0-9f26-db7798141b37.png" style="max-width:100%;"><br></p><p>嗯，咱们继续截图吧？</p><p><img src="http://181.181.0.140:8888/api/v1/static-resource/images/2019/04/12/818a5e02-bc12-4604-9824-cc924bd8b5d0.png" style="max-width:100%;"><img src="http://181.181.0.140:8888/api/v1/static-resource/images/2019/04/12/5ba18be3-f192-49da-9756-61daa577d675.png" style="max-width: 100%;"><br></p><p>好的有截了两张图</p><p>然后呢？</p><p><img src="http://181.181.0.140:8888/api/v1/static-resource/images/2019/04/12/2d9c533f-4ce7-4e0e-90ae-edfe2aada96e.png" style="max-width:100%;"><br></p>'
    }
  },
  methods: {
    onCapture() {
      const video = document.getElementById('video')
      const canvas = document.createElement('canvas')
      const { videoWidth: width, videoHeight: height } = video

      video.setAttribute("crossOrigin",'Anonymous')
      canvas.width = width
      canvas.height = height
      canvas.getContext('2d').drawImage(video, 0, 0, width, height)
      const img = canvas.toDataURL('images/png')
      const file = this.dataURL2File(img, 'video_' + new Date().getTime() + '.png')
      this.uploadImage(file)
    },
    dataURL2File(dataURL, fileName) {
      let arr = dataURL.split(',')
      let mime = arr[0].match(/:(.*?);/)[1]
      let bstr = atob(arr[1])
      let n = bstr.length
      let u8arr = new Uint8Array(n)
      while(n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], fileName, {type: mime})
    },
    uploadImage(file) {
      const params = new FormData()
      params.append('resource', file, encodeURI(file.name))
      params.append('directory', 'images')
      axios.post(`${this.baseUrl}/static-resource/upload`, params, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(res => {
        const { restbody } = res.data
        let url = `${this.baseUrl}/${restbody}`
        let img = `<img src="${url}" style="max-width:100%;" />`
        this.editor.cmd.do('insertHTML', img)

        /*
         * 复制url到剪切板，暂且屏蔽
         */
        /*let input = document.createElement('input')
        input.setAttribute('id', 'input-dom')
        input.value = url
        document.body.appendChild(input)
        input.select()
        try {
          let success = document.execCommand('copy')
          if (!success) {
            alert('图片地址复制失败')
          }
        } catch(err) {
          alert('不支持图片地址复制')
        }
        document.body.removeChild(input)*/
      })
    }
  },
  mounted() {
    // 具体配置，请参考https://www.kancloud.cn/wangfupeng/wangeditor3/335777
    let editor = new WangEditor('#wangEditor')
    editor.customConfig.menus = [
      'fontName',
      'fontSize',
      'bold',
      'foreColor',
      'image'
    ]
    editor.customConfig.onchange = html => {
      this.content = html
    }

    editor.create()
    this.editor = editor
    
    // 设置初始值
    this.editor.txt.html(this.initContent)
  }
}
</script>

<style lang="less" scoped>
</style>
